<template>
	<div class="top">
		<div class="nav">
			<div class="header">
				<div class="header_left" @click="language()">
					<img src="http://www.xiaomanjf.com/static/images/lclogo.png" alt="" />
				</div>
				<div class="header_right">
					<router-link v-for="(nav,index) in navList" :key="index" :to="nav.path">{{nav.text}}</router-link>
				</div>
			</div>
		</div>

		<ul>
			<li>{{$t('m.years')}}</li>

			<li>{{$t('m.name')}}</li>

		</ul>
	</div>
</template>

<script>
	export default {
		name: 'top',
		data() {
			return {
				navList: [{
						path: '/',
						text: '首页'
					},
					{
						path: 'anquan',
						text: '安全保障'
					},
					{
						path: 'jiaruwomen',
						text: '加入我们'
					},
					{
						path: 'lianxi',
						text: '联系我们'
					}
				],
				lang: 'zh-CN'
			}
		},
		methods: {
			language() {
				if(this.lang === 'zh-CN') {
					this.lang = 'en-US';
					this.$i18n.locale = this.lang;
				} else {
					this.lang = 'zh-CN';
					this.$i18n.locale = this.lang;
				}
			},
		}
	}
</script>

<style scoped>
	li {
		list-style: none;
	}
	
	a {
		text-decoration: none;
		color: #333;
	}
	
	a img {
		border: none;
	}
	
	.nav {
		width: 100%;
		background: #000;
	}
	
	.header {
		margin: 0 auto;
		width: 1000px;
		height: 99px;
		background: #fff;
		border-bottom: 1px solid orange;
	}
	
	.header_left {
		float: left;
		height: 99px;
	}
	
	.header_right {
		float: right;
		line-height: 99px;
	}
	
	.header_right a {
		position: relative;
		float: left;
		cursor: pointer;
		padding: 0 25px;
		height: 99px;
		padding-right: 20px;
	}
	
	.header_right a:hover {
		color: paleturquoise;
	}
	
	.router-link-exact-active {
		color: paleturquoise;
	}
</style>